<!-- 搜索组件 -->
<template>
  <div class="search-inner">
    <!-- <div class="search-inner-header"></div> -->
    <my-header></my-header>
    <div class="search-inner-input">
      <div class="input-box">
        <input
          type="text"
          placeholder="搜索音乐、MV、歌单、用户"
          v-model="inputValue"
          @keydown.enter="SearchSong"
        />
        <button class="btn" @click="SearchSong"><i class="icon_search sprite"></i></button>
      </div>
      <div class="inner-input-tips">
        热门搜索:
        <a href="javascript:;" class="search-tips-item">我们的歌</a>
        <a href="javascript:;" class="search-tips-item">冰雪奇缘2</a>
        <a href="javascript:;" class="search-tips-item">张杰</a>
        <a href="javascript:;" class="search-tips-item">桥边姑娘</a>
        <a href="javascript:;" class="search-tips-item">星辰大海</a>
      </div>
    </div>
    <div class="search-inner-content">
      <div class="inner-content-inner">
        <!-- 结果导航 -->
        <div class="con-tab">
          <a href="javascript:;" class="con-tab-item">单曲</a>
          <a href="javascript:;" class="con-tab-item">专辑</a>
          <a href="javascript:;" class="con-tab-item">MV</a>
          <a href="javascript:;" class="con-tab-item">歌单</a>
          <a href="javascript:;" class="con-tab-item">用户</a>
          <a href="javascript:;" class="con-tab-item">歌词</a>
        </div>
        <!-- 单曲 -->
        <div class="song-box">
          <div class="songlist-toolbar">
            <a href="javascript:;" class="mod-btn all_play">
              <i class="mod-btn-icon-play"></i>播放全部
            </a>
            <a href="javascript:;" class="mod-btn all_fav">
              <i class="mod-btn-icon-add"></i>添加到
            </a>
            <a href="javascript:;" class="mod-btn all_down">
              <i class="mod-btn-icon-down"></i>下载
            </a>
            <a href="javascript:;" class="mod-btn all_batch">
              <i class="mod-btn-icon-batch"></i>批量操作
            </a>
          </div>
          <div class="songlist">
            <ul class="songlist-header">
              <li class="songlist-header-name">歌曲</li>
              <li class="songlist-header-author">歌手</li>
              <li class="songlist-header-album">专辑</li>
              <li class="songlist-header-time">时长</li>
            </ul>
            <ul class="songlist-list">
              <li
                class="songlist-list-item"
                v-for="(element,index) in songInfoArr"
                :key="element.id"
              >
                <!-- @mouseenter="handleShow(element.id,$event)" -->
                <div class="list-item-inner" ref="listitem">
                  <div class="item-inner-songname">
                    <span class="songname"
                      ><a href="javascript:;" @click="godail(element.id)">{{ element.name }}</a></span
                    >
                    <div :class="['list-menu',{hidden:flag}]">
                      <a
                        href="javascript:;"
                        class="list_menu__play list_menu__item"
                        title="播放"
                      >
                        <i
                          class="list_menu__icon_play"
                          v-on:click="handleLinkAudioplayer(element.id,index)"
                        ></i>
                        <!-- <span class="icon_txt">播放</span> -->
                      </a>
                      <a
                        href="javascript:;"
                        class="list_menu__add list_menu__item"
                        title="添加到歌单"
                      >
                        <i class="list_menu__icon_add"
                        @click="handleAddSong(element.name)"
                        ></i>
                        <!-- <span class="icon_txt">添加到歌单</span> -->
                      </a>
                      <a
                        href="javascript:;"
                        class="list_menu__down list_menu__item"
                        title="VIP下载"
                      >
                        <i class="list_menu__icon_down"></i>
                        <!-- <span class="icon_txt">VIP下载</span> -->
                      </a>
                      <a
                        href="javascript:;"
                        class="list_menu__share list_menu__item"
                        title="分享"
                      >
                        <i class="list_menu__icon_share"></i>
                        <!-- <span class="icon_txt">分享</span> -->
                      </a>
                    </div>
                  </div>
                  <div class="item-inner-author">
                    {{ element.artists[0].name }}
                  </div>
                  <div class="item-inner-album">{{ element.album.name }}</div>
                  <div class="item-inner-time">{{getSongTime(element.duration)}}</div>
                  <div class="item-inner-other"></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import router from '@/router/index';
import busline from '@/busline/busline'
import header from '@/components/header.vue'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    'my-header':header,
  },
  data: function () {
    //这里存放数据
    return {
      inputValue: "",
      songInfoArr: [],
      flag: true, //默认为true,隐藏list-menu;
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    godail(id){
      // console.log(id)
      // busline.$emit('sendSongId',id)
      this.$store.commit('SendSongId',id)
        // location.href='./songdail'
        this.$router.push('songdail')
    },
    //搜索歌曲
    SearchSong() {
      this.$http
        .get("search", {
          params: {
            keywords: this.inputValue,
          },
        })
        .then((res) => {
          // console.log(res.result.songs);
          // console.log(res.result.songs[0].name);
          this.songInfoArr = res.data.result.songs;
        });
    },
    //显示list-menu
    // handleShow(id, event) {
    //   console.log(id, event);
    //   this.flag = false;
    // },
    //隐藏list-menu
    // handleHidden(id) {
    //   console.log(id);
    //   this.flag = true;
    // },
    //点击跳转音频播放路由
    handleLinkAudioplayer(id,index) {
      this.$router.push("audioplayer");
      this.$http
        .get("song/url", {
          params: {
            id: id,
          },
        })
        .then((res) => {
          // console.log(res);
          // console.log(res.data[0].url);
          busline.$emit("getSongInfo",this.songInfoArr[index]);
          busline.$emit("getSongUrl",res.data.data[0].url);
          this.$store.commit('Songs',this.songInfoArr[index])
        });
    },
    //计算音频时长
    getSongTime(time){
      
        let time2=parseInt(time/1000);
        let minutes=parseInt(time2/60);
        if(minutes<10){
          minutes='0'+minutes;
        }
        let seconds=time2-minutes*60;
        if(seconds<10){
          seconds='0'+seconds;
        }
     return minutes+':'+seconds;
    },
    //添加到我的歌单
    handleAddSong(){

    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    busline.$on("sendResult", (result) => {
      this.songInfoArr = result;
      // console.log(this.songInfoArr);
      // console.log(3);
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
a {
  text-decoration: none;
  color: white;
}
li {
  list-style: none;
}
.hidden {
  display: none;
}
.search-inner {
  // .search-inner-header {
  //   height: 90px;
  // }

  .search-inner-input {
    height: 247px;
    background: url(https://y.gtimg.cn/mediastyle/yqq/img/bg_search.jpg)
      no-repeat center;
    background-size: cover;
    position: relative;
    .input-box {
      width: 554px;
      height: 50px;
      padding: 0 70px 0 15px;
      line-height: 50px;
      position: relative;
      left: 50%;
      top: 85px;
      margin-top: 0;
      margin-left: -322px;
      background: white;
      border: none;
      border-radius: 3px;
      input {
        position: absolute;
        left: 15px;
        top: 0;
        width: 554px;
        height: 50px;
        border: 0;
        font-size: 14px;
        outline: none;
      }

      .btn {
        width: 50px;
        height: 50px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        position: absolute;
        top: 0;
        right: 0;
        border: 0;
        overflow: visible;
        cursor: pointer;
        outline: none;
        background: white;
        .icon_search {
          position: absolute;
          top: 50%;
          right: 11px;
          margin-top: -8px;
          width: 16px;
          height: 16px;
        }
        .sprite {
          background: url(/static/images/icon_sprite.png) no-repeat 0 -40px;
        }
      }
    }

    .inner-input-tips {
      margin-top: 104px;
      text-align: center;
      color: white;
      padding-left: 20px;
      font-size: 14px;
      .search-tips-item {
        margin-right: 20px;
      }
    }
  }

  .search-inner-content {
    background: white;
    min-width: 1200px;
    position: relative;
    height: 845px;
    .inner-content-inner {
      width: 1200px;
      margin: 0 auto;
      height: 823px;
      .con-tab {
        position: relative;
        border-bottom: 1px solid #f7f7f7;
        margin-bottom: 30px;
        height: 56px;
        .con-tab-item {
          color: black;
          position: relative;
          font-size: 16px;
          margin-right: 55px;
          height: 56px;
          line-height: 56px;
          display: inline-block;
        }
        .con-tab-current {
          color: #31c27c;
        }
      }
      .song-box {
        .songlist-toolbar {
          position: relative;
          margin-bottom: 20px;
          font-size: 0;
          .mod-btn {
            min-width: 122px;
            text-align: center;
            border: 1px solid #c9c9c9;
            color: black;
            border-radius: 2px;
            font-size: 14px;
            margin-right: 6px;
            padding: 0 23px;
            height: 38px;
            line-height: 38px;
            display: inline-block;
            white-space: nowrap;
            box-sizing: border-box;
            overflow: hidden;
            .mod-btn-icon-play {
              width: 13px;
              height: 16px;
              background: url(/static/images/icon_sprite.png) no-repeat -60px -220px;
              display: inline-block;
              margin-right: 6px;
              vertical-align: -3px;
            }
            .mod-btn-icon-add {
              width: 16px;
              height: 16px;
              background: url(/static/images/icon_sprite.png) no-repeat -20px 0px;
              display: inline-block;
              margin-right: 6px;
              vertical-align: -3px;
            }
            .mod-btn-icon-down {
              width: 16px;
              height: 16px;
              background: url(/static/images/icon_sprite.png) no-repeat -40px -220px;
              display: inline-block;
              margin-right: 6px;
              vertical-align: -3px;
            }
            .mod-btn-icon-batch {
              width: 16px;
              height: 16px;
              background: url(/static/images/icon_sprite.png) no-repeat -120px 0px;
              display: inline-block;
              margin-right: 6px;
              vertical-align: -3px;
            }
          }
        }
        .songlist {
          padding-bottom: 40px;
          font-size: 14px;
          overflow: hidden;
          .songlist-header {
            padding: 0 122px 0 20px;
            height: 50px;
            line-height: 50px;
            background: rgba(0, 0, 0, 0.01);
            color: #999;
            position: relative;
            .songlist-header-name {
              float: left;
              width: 47.685185%;
              position: relative;
              white-space: normal;
            }
            .songlist-header-author {
              float: left;
              padding-left: 15px;
              width: 25.5%;
              box-sizing: border-box;
            }
            .songlist-header-album {
              float: left;
              padding-left: 15px;
              width: 25.5%;
              box-sizing: border-box;
            }
            .songlist-header-time {
              position: absolute;
              right: 64px;
              top: 0;
              width: 50px;
            }
          }
          .songlist-list {
            clear: both;
            overflow: hidden;
            .songlist-list-item {
              .list-item-inner {
                padding: 0 122px 0 20px;
                clear: both;
                font-size: 0;
                overflow: hidden;
                position: relative;
                .item-inner-songname {
                  float: left;
                  width: 47.685185%;
                  height: 50px;
                  line-height: 50px;
                  position: relative;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 14px;
                  .songname {
                    max-width: 72%;
                    box-sizing: border-box;
                    float: left;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-right: 8px;
                    white-space: nowrap;
                    font-size: 14px;
                    a {
                      color: black;
                    }
                  }
                  .list-menu {
                    position: absolute;
                    right: -10px;
                    // top: 50%;
                    top: 7px;
                    overflow: hidden;
                    height: 36px;
                    font-size: 0;
                    // pointer-events: none;
                    .list_menu__item {
                      display: inline-block;
                      margin-right: 10px;
                      vertical-align: top;
                      cursor: pointer;
                      .list_menu__icon_play {
                        display: block;
                        width: 36px;
                        height: 36px;
                        background: url(/static/images/icon_list_menu.png)
                          no-repeat 0 0;
                      }
                      .list_menu__icon_add {
                        display: block;
                        width: 36px;
                        height: 36px;
                        background: url(/static/images/icon_list_menu.png)
                          no-repeat 0 -80px;
                      }
                      .list_menu__icon_down {
                        display: block;
                        width: 36px;
                        height: 36px;
                        background: url(/static/images/icon_list_menu.png)
                          no-repeat 0 -280px;
                      }
                      .list_menu__icon_share {
                        display: block;
                        width: 36px;
                        height: 36px;
                        background: url(/static/images/icon_list_menu.png)
                          no-repeat 0 -40px;
                      }
                    }
                    .list_menu__play:hover .list_menu__icon_play {
                      background-position: -40px 0;
                    }
                    .list_menu__add:hover .list_menu__icon_add {
                      background-position: -40px -80px;
                    }
                    .list_menu__down:hover .list_menu__icon_down {
                      background-position: -40px -280px;
                    }
                    .list_menu__share:hover .list_menu__icon_share {
                      background-position: -40px -40px;
                    }
                  }
                }
                .item-inner-author {
                  float: left;
                  width: 25.5%;
                  height: 50px;
                  line-height: 50px;
                  padding-left: 15px;
                  box-sizing: border-box;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 14px;
                }
                .item-inner-album {
                  float: left;
                  width: 25.5%;
                  height: 50px;
                  line-height: 50px;
                  padding-left: 15px;
                  box-sizing: border-box;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 14px;
                }
                .item-inner-time {
                  position: absolute;
                  right: 64px;
                  top: 0;
                  width: 50px;
                  height: 50px;
                  line-height: 50px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 14px;
                  color: #999;
                }
                .item-inner-other {
                  width: 64px;
                  height: 50px;
                  line-height: 50px;
                  position: absolute;
                  right: 0px;
                  top: 0;
                  overflow: inherit;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 14px;
                }
              }
            }
            .songlist-list-item:hover .list-menu {
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>